<template>
  <div class="booklist">
    <ul>
      <li class="book-list-wrap cf" v-for="(item, index) in data" :key="index">
        <book-list-item :img="item.icon" :path="item.path">
          <span slot="book">{{ item.name }}</span>
          <span slot="author">{{ item.author }}</span>
          <span slot="desc">{{ item.desc }}</span>
        </book-list-item>
        <top-sign v-if="showsign" :top="index + 1"></top-sign>
      </li>
    </ul>
  </div>
</template>

<script>
import BookListItem from '@/components/BookListItem.vue'
import TopSign from '@/components/TopSign.vue'
export default {
  components: {
    BookListItem,
    TopSign
  },
  data() {
    return {

    }
  },
  props: {
    data: Array,
    showsign: {
      type: Boolean,
      default: false
    }
  },

}
</script>

<style>
.booklist {
  padding: 0 15px;
}

.cf::after {
  display: table;
  content: '';
  clear: both;
}

.book-list-wrap {
  position: relative;
  padding: 20px 0;
}
</style>